<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-06-29 10:07:57
 * @LastEditors: voanit
 * @LastEditTime: 2022-06-29 10:51:59
-->
<template>
  <div>
    御剑乘风来,除魔天地间!===vue3===demo
    {{ obj.x }}=={{ obj.y }}
  </div>
</template>
<script>
/* 
目的：鼠标移动获取坐标，并展示坐标
步骤：
  1-定义一个响应式对象 保存坐标并展示
  2-绑定事件===鼠标移动事件
  3-获取移动事件的事件对象===获取坐标
  4-需要将获取的坐标赋值给响应式对象
*/
import { reactive, onMounted, toRefs } from 'vue'
const mouse = () => {
  // 1-定义一个响应式对象 保存坐标并展示
  const obj = reactive({
    x: 0,
    y: 0
  })
  // const newObj = toRefs(obj)
  // 2-绑定事件===鼠标移动事件
  onMounted(() => {
    window.addEventListener('mousemove', (e) => {
      // console.log(newObj, 88);
      // 3 - 获取移动事件的事件对象 === 获取坐标
      // console.log(e.pageX, 111);
      // 4-需要将获取的坐标赋值给响应式对象
      obj.x = e.pageX
      obj.y = e.pageY
      // newObj.x.value = e.pageX
      // newObj.y.value = e.pageY
    })
  })

  return obj
}

export default {
  name: '',
  setup () {
    const obj = mouse()

    return { obj }

  }
}
</script>
<style lang='less'  scoped>
</style>